<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">{{message}}</div>
    <script src="../JavaScript//vue.js"></script>
    <script>
    /*
    data与el的两种写法：
        1.el有两种写法：
            new Vue时配置el选项
            先创建Vue实例，随后通过Vue实例vm.$mount("#app")来挂载实例
        2.data有两种写法
            对象式的data
            函数式的data
            如何选择：两种写法都可以但是在组件里data必须写成函数并且返回一个对象
        注意：
            由Vue管理的函数不能写法箭头函数，一旦写了箭头函数this就不是Vue实例了
     */

    /*   
    第一种写法
        const vm = new Vue({
            el:"#app",
            data:{
                message:"hello"
            }
        })
    */
       
    //第二种写法
        const vm = new Vue({
            data() {
                console.log(this);//data函数里的this指向Vue实例对象
                return {
                    message: "HelloVue"
                }
            }
        })
        vm.$mount("#app")
    </script>
</body>

</html>